<style scoped >
</style>
<template>
    <div class="console-product">
        <!-- 头部-->
        <Row class="position noprint">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb pos">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">
                        业务中心
                    </span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">提交生产</span>
                </div>
            </i-col>
        </Row>
        <!-- 头部结束-->
        <!-- 中间主体-->
        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <!-- 搜索-->
            <Form class="searchform noprint" ref="tjscForm" :model="tjscForm" inline  >
                <Form-item label="订单:" :label-width="35" style="width:160px;">
                    <Input v-model="tjscForm.khdh" placeholder="请输入" @on-enter="tjscFormSearch"></Input>
                </Form-item>
                <Form-item class="createdate" label="日期:" :label-width="35">
                    <Date-picker type="date" v-model="tjscForm.creatDate"  placeholder="选择日期" style="width: 125px"></Date-picker>
                </Form-item>
                <Form-item label="时间点:" :label-width="50" style="width:130px;">
                    <Select v-model="tjscForm.sjd" placeholder="全部">
                        <Option v-for="item in statusTime" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="服装类别:" :label-width="65" style="width:160px;">
                    <Select v-model="tjscForm.fzflecode">
                        <Option v-for="item in statusType" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="状态:" :label-width="35" style="width:130px;">
                    <Select v-model="tjscForm.scddzt">
                        <Option v-for="item in statusList" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item label="分类:" :label-width="35" style="width:130px;">
                    <Select v-model="tjscForm.tzecode">
                        <Option v-for="item in statusEcode" :value="item.value" :key="item">{{ item.label }}</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="tjscFormSearch">搜索</Button>
                </Form-item>
            </Form>
            <!-- 搜索结束-->
            <!-- 表格-->
            <Loading v-if="spinShow"></Loading>
            <Table class="noprint" v-if="tableShow"  stripe border :columns="tjscColumns" :data="tjscData"></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import Loading from '../../components/loading';
    export default {
        //所需子组件
        components: {Loading},
        data () {
            return {
                total:0,//总条数
                currentPage:1,//当前页
                pageTotal:1,//总页数
                pageSize:10,//默认每页显示数量
                height:1000,//表单高度
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                modal_loading: false,
                tjscForm:{//系统对照条件查询
                    khdh:"",         //订单
                    fzflecode:"XF", //服装类别
                    scddzt:"0",   //状态
                    tzecode:"0",  //分类
                    creatDate:new Date(),
                    sjd:""
                },
                //时间点
                statusTime:[
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '上午'
                    },
                    {
                        value: '2',
                        label:'下午'
                    },
                ],
                //服装类别
                statusType:[
                    {
                        value: 'XF',
                        label: '西服厂'
                    },
                    {
                        value: 'CY',
                        label:'衬衣厂'
                    },
                ],
                //操作状态列表
                statusList: [
                    {
                        value: '0', //参考老系统
                        label: '制版'
                    },
                    {
                        value: '1',
                        label: '生产'
                    }
                ],
                //分类
                statusEcode:[
                    {
                        value: '0',//参考老系统
                        label: 'MTM'
                    },
                    {
                        value: '1',
                        label: '团装'
                    }
                ],
                //提交生产数据格式
                tjscColumns:[
                    {
                        width:'6%',
                        title: '审核',
                        type: 'status',//自定义字段
                        render: (h, params) => {
                            return h('div', [
                                params.row.auditby == ""  ?
                                    h('Tooltip', {
                                        props: {
                                            content: '未审核'
                                        }
                                    }, [h('i',
                                        {
                                            class:'iconfont icon-shape2',
                                            style:{
                                                cursor:'pointer',
                                                color: '#333'
                                            },
                                            on: {
                                                click: () => {
                                                    this.toggleTjsc(params.row)
                                                }
                                            }
                                        })])
                                    :
                                    h('Tooltip', {
                                        props: {
                                            content: '审核'
                                        }
                                    }, [h('i',
                                        {
                                            class:'iconfont icon-shape2',
                                            style:{
                                                cursor:'pointer',
                                                color: '#37b3b3'
                                            },
                                            on: {
                                                click: () => {
                                                    this.toggleTjsc(params.row)
                                                }
                                            }
                                        })])
                            ]);
                        }
                    },
                    {
                        width:'12%',
                        title: '客户订单号',
                        key: 'khdh',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.khdh,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.khdh)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '系统订单号',
                        key: 'ecode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.ecode,
                                    placement:"bottom-start"
                                }
                            }, [
                                h('span',
                                    {
                                        style: {cursor: 'pointer', color: '#36b4b3'},
                                        on: {
                                            click: () => {
                                                this.showGyxx(params.row.gyxxgllid);
                                            }
                                        }
                                    }, [
                                        h("span",params.row.ecode)
                                    ])
                            ]);
                        }
                    },
                    {
                        width:'8%',
                        title: '大类',
                        key: 'fzflecode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.fzflecode,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.fzflecode)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '工艺类型',
                        key: 'mrgyecode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.mrgyecode,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.mrgyecode)]);
                        }
                    },
                    {
                        width:'10%',
                        title: 'CAD创建人',
                        key: 'createby',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.createby,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.createby)]);
                        }
                    },
                    {
                        width:'12%',
                        title: 'CAD创建时间',
                        key: 'createtime',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.createtime,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.createtime)]);
                        }
                    },
                    {
                        width:'10%',
                        title: '审核人',
                        key: 'auditby',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.auditby,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.auditby)]);
                        }
                    },
                    {
                        width:'12%',
                        title: '审核时间',
                        key: 'audittime',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.audittime,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.audittime)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '订单提交',
                        key: 'orderby',
                        render: (h, params) => {
                            return h('div', [
                                params.row.scddzt == "" ? h('i', {
                                    style:{
                                        cursor: 'pointer',
                                        color: '#f76162'
                                    },
                                    class: 'iconfont icon-chahao',
                                    on: {
                                        click: () => {
                                            this.doSubmitERP(params.row)
                                        }
                                    }
                                }):h('i', {
                                    class: 'iconfont icon-duihao',
                                    style: {
                                        color: '#00cd65'
                                    }
                                })
                            ]);
                        }
                    }
                ],
                //系统对照数据
                tjscData:[],
            }
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize=20;
            }
            this.tjscData = this.tjscTableData(this.tjscForm,this.currentPage,this.pageSize);
        },
        mounted() {
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            tjscTableData (formData,currentPage,pageSize) {
                var khdh = formData.khdh;//订单
                var createtime = "";//日期
                var sjd = formData.sjd;//时间点
                var fzflecode = formData.fzflecode;//服装类别
                var scddzt = formData.scddzt;//状态
                var tzecode = formData.tzecode;//分类
                if(formData.creatDate != "" && formData.creatDate != null){
                    var time = new Date(formData.creatDate).getTime();
                    createtime = new Date(time).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        khdh : khdh,
                        createtime : createtime,
                        sjd : sjd,
                        fzflecode:fzflecode,
                        scddzt:scddzt,
                        tzecode:tzecode
                    }
                };
                if(createtime == "" && sjd != ""){
                    this.$Message.error('搜索时间点必须选日期!');
                }else{
                    this.spinShow=true;
                    this.tableShow = false;
                    this.$Loading.start();
                    axios.get('/tjscvos',data).then(res => {
                        this.total=res.data.total;
                        this.pageTotal=Math.ceil(res.data.total / pageSize);
                        this.tjscData = res.data.data;
                        this.spinShow=false;
                        this.tableShow = true;
                        this.$Loading.finish();
                    }).catch(err =>{
                        this.$Loading.error();
                    })
                }
            },
            //条件查询
            tjscFormSearch(){
                if(this.tjscForm.creatDate == ""){
                    $(".ivu-date-picker-editor input").val("")
                }
                this.currentPage=1;
                this.tjscData = this.tjscTableData(this.tjscForm,this.currentPage,this.pageSize);
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.tjscData = this.tjscTableData(this.tjscForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.tjscData = this.tjscTableData(this.tjscForm,this.currentPage,this.pageSize);
            },
            toggleTjsc (row) { //审核状态
                var type = 0;
                if(row.auditby == ""){
                    type=0;
                }else{
                    type=1;
                }
                var qs = require("qs");
                axios.put('/tjscvos/'+row.scddid+'/'+type).then(res => {
                    this.tjscData[row._index].auditby = res.data.auditby;
                    this.tjscData[row._index].audittime = res.data.audittime;
                }).catch(err =>{
                });
            },
            doSubmitERP(row){//订单提交
                axios.put('/tjscvos/'+row.ecode).then(res => {
                    this.$Message.success('订单提交成功!');
                    this.tjscData = this.tjscTableData(this.tjscForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                });
            },
            showGyxx(id){
                window.open("/printTJSC/"+id);
            },

        }
    }
</script>